<template>
  <div class="login" ref="login_body" v-bind:style="{height: widowHeight +'px'}">
    <body class="login-layout">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="ace-icon fa fa-leaf green"></i>
									<span class="red">SSO</span>
									<span class="white" id="id-text2">应用</span>
								</h1>
							</div>
							<div class="space-6"></div>
							<div class="position-relative">
								<!-- 登录-->
								<div id="login-box" v-if="loginType==0" class="login-box  visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<div class="space-6"></div>
											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right" style="color:red">
															{{errorMsg}}
														</span>
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="账户名/邮箱/手机号" v-model="loginName"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="密码" v-model="password"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="验证码" v-model="verifyCode"  style="width:59%;float:left"/>
														    <img v-bind:src="imageUrl" style="width:40%;height:35px;float:left" ref="verifyCode" @click="changeVerifyCode"/>
														</span>
													</label>

													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input type="checkbox" class="ace" />
															<span class="lbl"> 记住我</span>
														</label>

														<button type="button" class="width-35 pull-right btn btn-sm btn-primary" @click="login">
															<i class="ace-icon fa fa-key"></i>
															<span class="bigger-110">登录</span>
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>

											<div class="social-or-login center">
												<span class="bigger-110">其他登录方式</span>
											</div>

											<div class="space-6"></div>

											<div class="social-login center">
												<a class="btn btn-primary">
													<i class="ace-icon fa fa-facebook"></i>
												</a>

												<a class="btn btn-info">
													<i class="ace-icon fa fa-twitter"></i>
												</a>

												<a class="btn btn-danger">
													<i class="ace-icon fa fa-google-plus"></i>
												</a>
											</div>
										</div>

										<div class="toolbar clearfix">
											<div>
												<a href="#" data-target="#forgot-box" class="forgot-password-link" @click="toChange(1)">
													<i class="ace-icon fa fa-arrow-left"></i>
													忘记密码
												</a>
											</div>

											<div>
												<a href="#" data-target="#signup-box" class="user-signup-link" @click="toChange(2)">
													注册账号
													<i class="ace-icon fa fa-arrow-right"></i>
												</a>
											</div>
										</div>
									</div>
								</div>

								<!-- 忘记密码 -->
								<div id="forgot-box" v-else-if="loginType==1" class="forgot-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header red lighter bigger">
												<i class="ace-icon fa fa-key"></i>
												重置密码
											</h4>

											<div class="space-6"></div>
											<p>
												输入用来接收邮件的邮箱
											</p>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="邮箱" v-model="forgetEmail"/>
															<i class="ace-icon fa fa-envelope"></i>
														</span>
													</label>

													<div class="clearfix">
														<button type="button" class="width-35 pull-right btn btn-sm btn-danger">
															<i class="ace-icon fa fa-lightbulb-o"></i>
															<span class="bigger-110">发送给我</span>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link" @click="toChange(0)">
												返回登录
												<i class="ace-icon fa fa-arrow-right"></i>
											</a>
										</div>
									</div>
								</div>

								<!-- 新用户注册 -->
								<div id="signup-box" v-else class="signup-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header green lighter bigger">
												<i class="ace-icon fa fa-users blue"></i>
												新用户注册
											</h4>

											<div class="space-6"></div>
											<p style="color:red"> {{registError}}</p>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="邮件" v-model="registEmail"/>
															<i class="ace-icon fa fa-envelope"></i>
														</span>
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="手机号" v-model="registMobile"/>
															<i class="ace-icon fa fa-mobile"></i>
														</span>
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="用户名" v-model="registName"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="密码" v-model="registPwd"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="确认密码" v-model="comfirePwd" />
															<i class="ace-icon fa fa-retweet"></i>
														</span>
													</label>

													<div class="space-24"></div>

													<div class="clearfix">
														<button type="reset" class="width-30 pull-left btn btn-sm" @click="reset">
															<i class="ace-icon fa fa-refresh"></i>
															<span class="bigger-110">重置</span>
														</button>

														<button type="button" class="width-65 pull-right btn btn-sm btn-success" @click="regist">
															<span class="bigger-110">注册</span>
															<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link" @click="toChange(0)">
												<i class="ace-icon fa fa-arrow-left"></i>
												返回登录界面
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.signup-box -->
							</div><!-- /.position-relative -->
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->
	</body>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data(){
	  return {
		  widowHeight: window.innerHeight,
		  loginType : 0,
		  loginName:null,
		  password: null,
		  verifyCode:null,
		  errorMsg:'',
		  registError:'',
		  imageUrl: this.GLOBAL.verifyCodePath + '?time=' + new Date()
	  }
  },
  methods:{
	  //登录操作
	  login(){
		  var urlParams = this.getUrlParams();
		  var params = {};
		  params.loginName = this.loginName;
		  params.password = this.password;
		  params.verifyCode = this.verifyCode;
		  params.backUrl = urlParams['redirect'];
		  this.$http.post(this.GLOBAL.loginPath,params)
		  .then(function(resp){
			//登录后将用户信息放到session中		  
			  sessionStorage.setItem("user",resp.data);
			//登录后重定向
			if(resp.data.code == '0000'){

				var backUrl = resp.data.data.backUrl;

				if(backUrl.indexOf("http://") > 0){
					window.location.href = backUrl;	
				}else{
					this.$router.push({path:backUrl});
					// this.$router.push({ name: 'Main', params: { userId: 'wise' }})
				}
			}else{
				this.errorMsg = resp.data.message;
				return;
			}
		  	// if(this.$route.query.redirect){
			// 	  let redirect = this.$route.query.redirect;
			// 	  this.$router.push(redirect);	
			// }else{
			// 	  window.location.href = resp.data.backUrl;
 			// }
		  });
		//   this.$router.push({ path:'/main', params: { userId: 'wise' }})
		//   window.location.href = 'http://www.baidu.com'
	  },
	  //忘记密码
	  forget(){
		var email = this.forgetEmail;
	  },
	  //注册新用户
	  regist(){
		  var params = {};
		  if(this.registPwd == this.comfirePwd){
			  params.loginName = this.registName;
			  params.password = this.registPwd;
			  params.email = this.registEmial;
			  params.mobile = this.registMobile;
			  this.$http.post(this.GLOBAL.registPath,params).then(function(resp){
				if(resp.data.code == '0000'){

				}else{
					this.registError = resp.data.message
				}
			  });
		  }else{
			  this.registError = "两次输入的密码不一致"
		  }

	  },
	  toChange(type){
		this.loginType = type
	  },
	  //获取地址栏里的参数
	  getUrlParams(){
		  var params = {};
		  var str=location.href; 
		  var num=str.indexOf("?");
		  str=str.substr(num+1);
		  var arr=str.split("&");
		  for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                var name=arr[i].substring(0,num);
                var value=arr[i].substr(num+1);
                params[name]=value;
            }
		}
		return params;
	  },
	  changeVerifyCode(){
		  this.imageUrl = this.GLOBAL.verifyCodePath + '?time=' + new Date();
	  },
	  reset(){
		  this.registError = '';
		  this.registPwd ='';
		  this.registName = '';
		  this.registEmail = '';
		  this.registMobile = '';
		  this.comfirePwd = '';
	  }
  }
}


</script>

<style>
@import url(../assets/css/bootstrap.min.css);
@import url(../assets/css/font-awesome.min.css);
@import url(../assets/css/ace-rtl.min.css);
@import url(../assets/css/ace-skins.min.css);
@import url(../assets/css/datepicker.css);
@import url(../assets/css/ui.jqgrid.css);
@import url(../assets/css/ace.min.css);
@import url(../assets/css/jquery-ui-1.10.3.full.min.css);
img{
	cursor: pointer;
}
</style>